<template>
  <v-app>
    <GoBackTopbar title="个人中心" />
    <v-content class="personal-center">
      <Banner />
      <div class="high-line-space"></div>
      <MenuList />
      <div class="px-10 pt-8">
        <v-btn
          class="white--text"
          color="#2AB795"
          height="40"
          x-large
          rounded
          block
          @click="logout"
          :loading="logoutLoading"
        >
          退出登录
        </v-btn>
      </div>
    </v-content>
  </v-app>
</template>

<script lang="ts">
import Vue from 'vue';
import GoBackTopbar from '@/components/GoBackTopbar.vue';
import Banner from './components/Banner.vue';
import MenuList from './components/MenuList.vue';

export default Vue.extend({
  components: { GoBackTopbar, Banner, MenuList },
  data() {
    return {
      logoutLoading: false
    };
  },
  methods: {
    logout() {
      this.logoutLoading = true;
      this.$store.dispatch('logout', this.redirect);
    },
    redirect() {
      this.logoutLoading = false;
      this.$router.push('/');
    }
  }
});
</script>

<style lang="less" scoped>
.personal-center {
  height: 100vh;
  background-color: #eeeeee;
}
</style>
